<template>
  <ContentWrap>
    <div class="mb-10px routeHeader">
      <el-button @click="close">关闭</el-button>
    </div>
    <el-scrollbar :max-height="`${contentHeight - 73}px`">
      <el-table border v-loading="formLoading" ref="multipleTableRef" :data="list">
        <el-table-column 
          v-for="item, index in viewOrderTableTitleList" 
          :key="index" 
          :label="item.label"
          :header-align="item.headerAlign" 
          :align="item.align" 
          :prop="item.field" 
          min-width="200px"
        >
          <template #default="scope">
            <!-- 字典翻译 -->
            <dict-tag v-if="item.dictType" :type="item.dictType" :value="scope.row[item.field]" />
            <template v-else>
              <div v-if="['createTime', 'orderChangeDate'].includes(item.field)">{{ formatDate(scope.row[item.field]) }}</div>
              <div v-else>{{ scope.row[item.field] }}</div>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </ContentWrap>
</template>
<script setup lang="ts">
import * as MarketingOrderAlterApi from '@/api/orderManagement/marketingManagement/marketingOrderAlter'
import { formatDate } from '@/utils/formatTime'
import { viewOrderTableTitleList } from './tableTitle.data'

const props = defineProps({
  orderNumber: {
    type: String,
    default: ''
  },
  version: {
    type: String,
    default: ''
  },
  contentHeight: {
    type: Number,
    default: 0
  }
})

const formLoading = ref(false)
const list = ref([])  //列表

// 获取数据
const getData = async () => {
  console.log(props.version)
  const data = await MarketingOrderAlterApi.getMarketingOrderAlter({ orderNumber: props.orderNumber, version: props.version })
  list.value = data.products
}

// 关闭
const emits = defineEmits(['goBack'])
const close = () => {
  emits('goBack')
}

// 初始化
onMounted(() => {
  getData()
})
</script>
